<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 

    学习目标

        能够说出响应式原理
        能够使用媒体查询完成响应式导航
        能够使用Bootstrap的栅格系统
        能够使用bootstrap的响应式工具
        能够独立完成阿里百秀首页案例
     -->

     <!-- 
        1.1响应式开发原理
            就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

            设备划分                  尺寸区间
            超小屏幕（手机)            <768px
            小屏设备( 平板)            >= 768px ~ <992px
            中等屏幕(（桌面显示器)      > = 992px ~ <1200px
            宽屏设备(大桌面显示器)      >= 1200px

        1.2响应式布局容器

            响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
            原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，
            从而实现不同屏幕下，看到不同的页面布局和样式变化。
            

            平时我们的响应式尺寸划分

                超小屏幕（手机，小于768px )︰设置宽度为100%
                小屏幕（平板，大于等于768px )︰设置宽度为750px
                中等屏幕（桌面显示器，大于等于992px ):宽度设置为970px
                大屏幕(大桌面显示器，大于等于1200px):宽度设置为1170px

      -->
</body>
</html>